<template>
	<view class="page">
		<view class="p-search">
			<view class="flex-row items-center section space-x-15">
				<image
					class="image_4"
					src="/static/order-search.png"
				/>
				<input type="text" class="inpt" placeholder="搜索订单号、姓名、手机号等" confirm-type="search	"
				@confirm="onSearch"
				>
			</view>
		</view>
		<view class="p-search-placer"></view>
		<view class="p-tab align-center">
			<view class="tab-wrap" 
			   :class="{ active: idx === tabCurIdx }" 
			   v-for="(item, idx) in tabs" :key="idx" 
			   @click="tapTab(idx)"
			>
				<text class="txt">{{ item.name }}</text>
				<view class="count clamp" v-if="item.count && item.count>0">
					{{item.count}}
				</view>
			</view>
		</view>
		<view class="p-tab-placer"></view>
		<view class="p-list">
			<singleList ref="listRef" url="order.lists" :sendData="reqData" @reqEnd="searchEnd">
				<template v-slot:items="{ list }">
					<empty v-if="sRes && sRes==='empty'" marginTop="200rpx"></empty>
			
					<block v-for="(item, i) in list" :key="i">
						<orderItem :info="item" />
					 </block>
				</template>
			</singleList> 
			
		</view>
	</view>
</template>

<script lang="ts">
import {
	reactive,
	toRefs,
	defineComponent,
	ref,
	nextTick,
	// watchEffect,
} from 'vue';
import orderItem from './components/orderItem.vue';
import { onLoad, onShow,onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app';
const orders = defineComponent({
	components: {
		orderItem
	},
	props: {},
	setup(props: any, ctx: any) {
		const data = reactive({
			tabCurIdx: 0,
			tabs: [
				{ name: '全部', status: 'all' }, //,count:0
				{ name: '待取车', status: '10',count:0 },
				{ name: '待还车', status: '20',count:0 },
				{ name: '逾期', status: '200',count:0 },
				{ name: '完成/取消', status: '30' } //,count:0
			],
			keyword:'',
			reqData: {},
			sRes:'',
		});
		const tapTab = idx => {
			if (idx === data.tabCurIdx) {
				return;
			}
			data.tabCurIdx = idx;
			data.reqData = {
				status: data.tabs[data.tabCurIdx].status
			};
		};
		const listRef = ref();
		onLoad(e => {
			let status = e.status || 'all'; //字符串类型
			data.tabCurIdx = data.tabs.findIndex(t => t.status === status);
		});
		onShow(() => {
			nextTick(() => {
				data.reqData = {
					status: data.tabs[data.tabCurIdx].status,
					keyword: data.keyword,
				};
				// listRef.value.getList(true);
			});
			getCount();
		});
		onPullDownRefresh(()=>{
			uni.stopPullDownRefresh();
			nextTick(() => {
				listRef.value.getList(true);
				getCount();
			})
			
			
		})
		onReachBottom(()=>{
			listRef.value.getList();
		})
		const onSearch=(e)=>{
			data.tabCurIdx = 0;
			data.keyword =  e.detail.value;
			data.reqData = {
				status: data.tabs[data.tabCurIdx].status,
				keyword: data.keyword,
			};
		}
		const searchEnd =({loadingType,pageOneRes})=>{
			if(loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0){
				data.sRes='empty';
			}else{
				data.sRes=loadingType;
			}
		}
		const getCount = async ()=>{
			let res = await uni.$request('order.status_each_number');
			let counts = res.data;
			// data.tabs[0].count = counts.all;
			data.tabs[1].count = counts.daiquche;
			data.tabs[2].count = counts.daihuanche;
			data.tabs[3].count = counts.yuqi;
			// data.tabs[4].count = counts.wancheng;
			
		}
		return {
			...toRefs(data),
			tapTab,
			listRef,
			searchEnd,
			onSearch,
		};
	}
});
export default orders;
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
// .page {
// 	padding-top: 30rpx;
// }
.p-search {
	height: 80rpx;
	position: fixed;
	/* #ifdef H5 */
	top:calc(var(--window-top));
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	left: 0;
	z-index: 2;
	width: 100%;
	background-color: #f7f7f7;
	.section {
		margin: 0 30rpx;
		// padding: 24rpx;
		height: 80rpx;
		padding: 0 24rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		.image_4 {
			width: 32rpx;
			height: 32rpx;
		}
		.inpt{
			height: 80rpx;
			line-height: 80rpx;
			font-size: 26rpx;
			font-family: PingFang;
			margin-left: 15rpx;
			flex: 1;
		}
	}
	.space-x-15 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 15rpx;
		}
	}
}
.p-search-placer{
	width: 100%;
	height: 80rpx;
}
.p-tab {
	// padding: 0 30rpx;
	position: fixed;
	/* #ifdef H5 */
	top:calc(var(--window-top) + 80rpx);
	/* #endif */
	/* #ifndef H5 */
	top: 80rpx;
	/* #endif */
	
	left: 0;
	z-index: 2;
	width: 100%;
	background-color: #f7f7f7;
	border-bottom: 2rpx solid #eee;
	// box-shadow: 0 1rpx 4rpx rgba(0,0,0,.1);
	.tab-wrap {
		.txt {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333;
			line-height: 80rpx;
		}
		text-align: center;
		width: 20%;
		height: 80rpx;

		position: relative;
		.count{
			position: absolute;
			top: 6rpx;
			right: 16rpx;
			z-index: 2;
			border-radius: 100rpx;
			width: 30rpx;
			height: 30rpx;
			text-align: center;
			line-height: 30rpx;
			font-size: 24rpx;
			color:#fff;
			background-color: #E62019;
		}
		&.active {
			color: #256ae5;
			&::after {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 14rpx;
				content: '';
				width: 40rpx;
				height: 3rpx;
				background: #256ae5;
				border-radius: 4rpx;
			}
		}
	}
}
.p-tab-placer {
	width: 100%;
	height: 80rpx;
}
.p-list {
	padding: 0 20rpx;
}
</style>
